﻿<!--
 *  Copyright © 2011 Digia Plc
 *  Copyright © 2011 Nokia Corporation
 *
 *  All rights reserved.
 *
 *  Nokia and Nokia Connecting People are registered trademarks of
 *  Nokia Corporation.
 *  Java and all Java-based marks are trademarks or registered
 *  trademarks of
 *  Sun Microsystems, Inc. Other product and company names
 *  mentioned herein may be
 *  trademarks or trade names of their respective owners.
 *
 *
 *  Subject to the conditions below, you may, without charge:
 *
 *  ·  Use, copy, modify and/or merge copies of this software and
 *     associated documentation files (the "Software")
 *
 *  ·  Publish, distribute, sub-licence and/or sell new software
 *     derived from or incorporating the Software.
 *
 *
 *  This file, unmodified, shall be included with all copies or
 *  substantial portions
 *  of the Software that are distributed in source code form.
 *
 *  The Software cannot constitute the primary value of any new
 *  software derived
 *  from or incorporating the Software.
 *
 *  Any person dealing with the Software shall not misrepresent
 *  the source of the Software.
 *
 *  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY
 *  KIND, EXPRESS OR IMPLIED,
 *  INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
 *  MERCHANTABILITY, FITNESS FOR A
 *  PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 *  AUTHORS OR COPYRIGHT
 *  HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
 *  WHETHER IN AN ACTION
 *  OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 *  CONNECTION WITH THE
 *  SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 * -->
    
    <phone:PhoneApplicationPage 
    x:Class="BubbleLevel.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="480"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Landscape" Orientation="Landscape"
    shell:SystemTray.IsVisible="False">

    <phone:PhoneApplicationPage.Resources>
        <!-- The following StoryBoard items are responsible of animating the sign plate -->
        <Storyboard x:Name="SignFlipStoryBoard">
            <DoubleAnimation Storyboard.TargetName="SignFrontProjection"
                             Storyboard.TargetProperty="RotationX"
                             To="90" Duration="0:0:0.125" />
            <DoubleAnimation Storyboard.TargetName="SignBackProjection"
                             Storyboard.TargetProperty="RotationX"
                             To="0" Duration="0:0:0.125"
                             BeginTime="0:0:0.125" />
        </Storyboard>
        
        <Storyboard x:Name="SignResetStoryBoard">
            <DoubleAnimation Storyboard.TargetName="SignBackProjection"
                             Storyboard.TargetProperty="RotationX"
                             To="-90" Duration="0:0:0.125" />
            <DoubleAnimation Storyboard.TargetName="SignFrontProjection"
                             Storyboard.TargetProperty="RotationX"
                             To="0" Duration="0:0:0.125"
                             BeginTime="0:0:0.125"/>
        </Storyboard>

        <!-- The following Button Style is used to implement the change of background gradient
             when the Calibrate button is pressed. This code was created by using 
             Microsoft Expression Blend 4 -->
        <Style x:Key="ButtonStyle" TargetType="Button">
        	<Setter Property="Background" Value="Transparent"/>
        	<Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
        	<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
        	<Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
        	<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
        	<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
        	<Setter Property="Padding" Value="10,3,10,5"/>
        	<Setter Property="Template">
        		<Setter.Value>
        			<ControlTemplate TargetType="Button">
        				<Grid Background="Transparent">
        					<VisualStateManager.VisualStateGroups>
        						<VisualStateGroup x:Name="CommonStates">
        							<VisualState x:Name="Normal"/>
        							<VisualState x:Name="MouseOver"/>
        							<VisualState x:Name="Pressed">
        								<Storyboard>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
        										<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
        									</ObjectAnimationUsingKeyFrames>
        									<DoubleAnimation Duration="0" To="0.1" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Offset)" Storyboard.TargetName="ButtonBackground" d:IsOptimized="True"/>
        									<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" Storyboard.TargetName="ButtonBackground" d:IsOptimized="True"/>
        									<DoubleAnimation Duration="0" To="0.9" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Offset)" Storyboard.TargetName="ButtonBackground" d:IsOptimized="True"/>
        								</Storyboard>
        							</VisualState>
        							<VisualState x:Name="Disabled">
        								<Storyboard>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
        										<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
        									</ObjectAnimationUsingKeyFrames>
        								</Storyboard>
        							</VisualState>
        						</VisualStateGroup>
        					</VisualStateManager.VisualStateGroups>
        					<Border x:Name="ButtonBackground" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}" BorderBrush="#FF817D7D">
        						<Border.Background>
        							<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#999999" Offset="0" />
                                        <GradientStop Color="#BBBBBB" Offset="0.2" />
                                        <GradientStop Color="#BBBBBB" Offset="0.8" />
                                        <GradientStop Color="#999999" Offset="1" />
                                    </LinearGradientBrush>
        						</Border.Background>
        						<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
        					</Border>
        				</Grid>
        			</ControlTemplate>
        		</Setter.Value>
        	</Setter>
        </Style>
    </phone:PhoneApplicationPage.Resources>

    <!-- The main grid layout -->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <!-- The wooden board image has a mouse click handler to turn the front side of the sign visible -->
        <Image MouseLeftButtonUp="ResetSign"
               Stretch="Fill" Source="Images/board.png"/>

        <!-- The Bubble image -->
        <Image Name="Bubble" Width="120" Height="60"
               HorizontalAlignment="Center" VerticalAlignment="Top"
               Stretch="Fill"  Source="Images/bubble.png">
            <!-- We give a name to the transform to easily move the bubble in the C# code -->
            <Image.RenderTransform>
                <TranslateTransform x:Name="BubbleTransform" />
            </Image.RenderTransform>
        </Image>

        <!-- The scale lines on the glass tube -->
        <Image Width="270" Height="70"
               VerticalAlignment="Top"
               Stretch="Fill" Source="Images/scale.png"/>

        <!-- The reflection on the glass tube -->
        <Image Name="Reflection" Width="622" Height="26"
               HorizontalAlignment="Center" VerticalAlignment="Top"
               Stretch="Fill" Source="Images/reflection.png"
               Opacity="0.6"/>

        <!-- The tool icon -->
        <Image Width="78" Height="78"
               HorizontalAlignment="Right" VerticalAlignment="Bottom"
               Margin="0,0,35,60" 
               Source="Images/calibbutton.png"
               MouseLeftButtonUp="FlipSign"/>

        <!-- The front side of the sign -->
        <Image Width="504" Height="126"
               VerticalAlignment="Bottom"
               Margin="0,0,0,34" Visibility="Visible"
               MouseLeftButtonUp="FlipSign"
               Source="Images/signwithtext.png">
            <!-- For flipping the sign -->
            <Image.Projection>
                <PlaneProjection x:Name="SignFrontProjection" />
            </Image.Projection>
        </Image>
        
        <!-- The back side of the sign -->
        <Grid Width="504" Height="126"
              VerticalAlignment="Bottom"
              Margin="0,0,0,34">
            <!-- For flipping the sign -->
            <Grid.Projection>
                <PlaneProjection x:Name="SignBackProjection" RotationX="-90" />
            </Grid.Projection>
            
            <!-- Front side of the sign -->
            <Image MouseLeftButtonUp="FlipSign"
                   Source="Images/signblank.png" /> 

            <!-- The hint text -->
            <TextBlock Width="255" Height="71"
                       HorizontalAlignment="Left" Margin="45,0,0,0"
                       Text="Place the device on a level surface and tap Calibrate."
                       TextWrapping="Wrap"
                       Foreground="#302020" FontSize="22" IsHitTestVisible="False" />

            <!-- Calibration button, the button style is set to have a nice press gradient -->
            <Button Name="CalibrateButton"  Width="158" Height="98"
                    HorizontalAlignment="Right"
                    Content="Calibrate" Margin="0,0,30,0" BorderThickness="2"
                    Foreground="Black"
                    Click="CalibrateButton_Click" Style="{StaticResource ButtonStyle}">
            </Button>
        </Grid>
    </Grid>
</phone:PhoneApplicationPage>